<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { ref } from 'vue'
import { useFullscreen } from '@/composables/useFullscreen'
const boxRef = ref<HTMLElement | null>(null)
const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen(() => boxRef.value)
const toggle = () => {
    void (isFullscreen.value ? exitFullscreen() : enterFullscreen())
}
</script>

<template>
    <div ref="boxRef" class="fullscreen-box">
        <div>关于这个项目</div>
        <p>全屏显示的区域</p>
        <button @click="toggle">全屏</button>
    </div>
</template>

<style scoped lang="scss">
.fullscreen-box {
    background: #eef;
    padding: 16px;
    height: 300px;
    border: 2px dashed #99f;
}
</style>